import { useState, useEffect } from 'react'
import logo from './logo.svg'
import './App.css'
import _ from 'lodash'

const Animation = (props) => {
    // console.log(props)
    const {
        animation = false, // 默认值
        transitionStyles = { enter: { opacity: 1 }, leave: { opacity: 0 } },
        children
    } = props
    // console.log(animation, transitionStyles, children)
    // useState 函数运行的返回值 作为参数
    const [status, setStatus] = useState(() => {
        if (animation) return 'enter';
        else return 'leave'
    });

    useEffect(() => setStatus(animation ? 'enter' : 'leave'), [animation])

    const prevStyle = children?.props?.style || {}; // ?. 判断如果有就继续，没有就false
    // console.log(prevStyle)
    const animateStyle = transitionStyles[status];
    const transitionStyle = { transition: `all 300ms ease-in-out` }
    const styles = { ...prevStyle, ...animateStyle, ...transitionStyle }

    return (
        <div style={{ ...styles }}>
            {children}
        </div>
    )
    // return React.cloneElement(
    //   React.children.only(children),
    //   {
    //     style: {
    //       ...styles
    //     }
    //   }
    // )
    // (
    //   <div stlye={...styles}>
    //     Animation
    //     {props.children}
    //   </div>
    // )
}

function App() {
    // const [value, setValue] = useState('')
    // let currentValue = ''
    // const handleChange = (e) => {
    //   currentValue = e.target.value;
    //   setValue(currentValue)
    // }

    const [play, setPlay] = useState(false);

    {/* <input type="text" onChange={_.debounce(handleChange, 3000)} />
      <div>{value}</div>
      <div className="list">
        {
          Array(100)
            .fill("a")
            .map((item, index) => (
              <div key={index}>{value}</div>
            ))
        }
      </div> */}
    return (
        <div className="container">
            <button onClick={() => setPlay(!play)}>切换</button>
            <Animation animation={play}>
                <div className='box' style={{ fontSize: '20px' }}></div>
            </Animation>
        </div>
    )
}

export default App
